<template>
  <div class="role-detail-index">
    <ui-form :model="form" class="vx-form">
      <ui-form-item label="角色编号"> {{ form.id }}</ui-form-item>
      <ui-form-item label="角色名称"> {{ form.name }}</ui-form-item>
      <ui-form-item label="菜单权限">
        <ui-tree
          ref="tree"
          :data="menulist"
          default-expand-all
          show-checkbox
          check-on-click-node
          node-key="id"
          :default-checked-keys="checkedKeys"
          :props="defaultProps"
        >
        </ui-tree>
      </ui-form-item>
      <ui-form-item label=" ">
        <ui-button class="default-btn" @click="$router.go(-1)">返回</ui-button>
        <ui-button class="primary-long-btn" @click="confirmTrue">修改</ui-button>
      </ui-form-item>
    </ui-form>
  </div>
</template>
<script>
export default {
  name: 'role-detail-index',
  data() {
    return {
      menulist: this.getData().menuTree, //已经选中的菜单权限
      form: this.getData().role, //表单
      checkedKeys: [], //已授权的菜单列表
      defaultProps: {
        //树形组件绑定的属性
        children: 'children',
        label: 'name',
        disabled: this.disabledFn, //禁用
      },
    };
  },
  beforeRouteEnter(to, from, next) {
    //  如有从其他页面跳转进来则修改此处
    next((vm) => {
      if (from.path === '/system/role/role-detail/role-detail-pre') {
        vm.menulist = vm.getData().menuTree;
      }
    });
  },
  created() {
    this.authorization();
  },
  methods: {
    /**
     * 没有选中的禁用
     */
    disabledFn() {
      return true;
    },
    authorization() {
      /**
       * 循环遍历每一项是否authority=true
       * authority=true代表已经有的授权
       */
      this.menulist.forEach((item) => {
        if (item.children) {
          item.children.forEach((i) => {
            if (i.children) {
              i.children.forEach((j) => {
                if (j.children) {
                  j.children.forEach((k) => {
                    if (k.authority === true) {
                      this.checkedKeys.push(k.id);
                    } else {
                      this.disabledFn();
                    }
                  });
                } else {
                  if (j.authority === true) {
                    this.checkedKeys.push(j.id);
                  } else {
                    this.disabledFn();
                  }
                }
              });
            } else {
              if (i.authority === true) {
                this.checkedKeys.push(i.id);
              } else {
                this.disabledFn();
              }
            }
          });
        } else {
          if (item.authority === true) {
            this.checkedKeys.push(item.id);
          } else {
            this.disabledFn();
          }
        }
      });
    },
    /**
     * 确定修改传值跳转
     */
    confirmTrue() {
      this.setData({
        menuTree: this.menulist, //树形结构数据
        role: this.form, //表单数据
        checkedKeys: this.checkedKeys, //选中数据
      });
      console.log(this.checkedKeys);
      this.$router.push({
        path: '/system/role/role-detail/role-detail-pre',
      });
    },
  },
};
</script>

<style></style>
